<template>
  <div class="weekend-wrap">
    <div class="week-title">
      <span class="iconfont icon-xin" ></span>
      <span>周末去哪</span>
    </div>
    <ul class="week-item">
     <router-link
     to=""
     tag="li"
     class="item"
     v-for='(list,index) in weekendlist'
     :key='index'
     >
      <div class="item-img">
        <img :src="list.imgUrl" alt="">
      </div>
     <div class="item-info">
       <div class="info-title">{{list.infotitle}}</div>
       <div class="info-desc">{{list.infoDesc}}</div>
       <!-- 插件 -->
     </div>
     </router-link>
    </ul>
  </div>
</template>

<script>
export default{
    name:'HomeWeekend',
    props:['weekendlist'],
   data () {

     return {

     }
   }

  }
</script>
<style scoped="scoped">
  .week-title{
    line-height: 0.8rem;
    padding: 0 0.15rem;
  }
  .week-title .icon-xin{
    color: orange;
  }
  .item{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.15rem;
    background-color: #fff;
    border-bottom: rgb(245,245,245);
  }
  .item-img{
  overflow: hidden;
  height: 0;
  padding-bottom: 33%;

  }
  .item-img img{
    width: 100%;
  }
  .item-info{
    padding: 0.25rem 0.2rem;
    background-color: #fff;
    font-size: 0.14rem;
  }
 .info-title{
   font-size: 0.3rem;
 }
 .info-desc{
   margin-top: 0.2rem;
 }
</style>
